<template>
  <view class="content" v-if="isShow" @scroll="scroll">
    <view class="top-hider" :style="topHiderStyle">
      <view class="icon" :style="topHiderIconStyle" @click="toSindex">
        <image :src="image_host+'icon_back-bai.png'"></image>
      </view>
      <view class="top-hider-title">人康优选-{{ shopData.shopName }} 给您发福利啦！</view>
    </view>
    <view class="message-box" :style="messageBoxStyle" v-if="shopData.importantNotice">
      <image :src="image_host+'yinpin.png'"></image>
      <view class="text" :style="messageTextStyle">{{ shopData.importantNotice }}</view>
    </view>
    <view class="top-box" :style="'padding-top: '+menuInfo.contentTop">
      <view class="shop-content">
        <view class="box">
          <view class="shop-title">人康优选-{{ shopData.shopName }}</view>
          <view class="shop-username">
            <image class="image-icon" :src="image_host+'shop.png'"></image>
            <text>{{ shopData.name }}</text>
          </view>
          <view class="shop-address">
            <image class="image-icon" :src="image_host+'address.png'"></image>
            <view class="address text-break-word">{{ shopData.address }}</view>
            <!--            <view class="toAddress" @click="openAddress">导航</view>-->
          </view>
          <view class="shop-desc text-break-word">
            门店介绍：{{ shopData.shopDescription }}
          </view>
          <scroll-view :scroll-x="true" class="shop-images">
            <image v-for="(item,index) in shopData.shopImageUrlList" :src="item.url" mode="aspectFill"
                   @click="shoImage(index)"></image>
          </scroll-view>
        </view>
      </view>
      <view class="buttons">
        <button class="phone" @click="toPhone(shopData.phoneNumber)">
          <image :src="image_host+'phone2.png'"></image>
          <text>电话联系</text>
        </button>
        <button class="addShop" v-if="shopData.isFriend===0" @click="toAddUser">
          <image :src="image_host+'adduser.png'"></image>
          <text>加我好友</text>
        </button>
      </view>
    </view>
    <view class="item" v-if="isShopWelfare">
      <view class="top-title">
        <image :src="image_host+'red.png'"></image>
        <text>门店福利</text>
      </view>
      <view class="welfare-item" v-if="shopData.bountyAmountFlag===1">
        <view class="welfare-title">
          {{ welfareList[0] }}
          <text class="welfare-title-text">天天领红包</text>
        </view>
        <view class="welfare-desc">{{ shopData.bountyAmountInfo }}</view>
      </view>
      <view class="welfare-item" v-if="shopData.pointToMoneyFlag===1">
        <view class="welfare-title">
          {{ welfareList[1] }}
          <text class="welfare-title-text">积分当钱花</text>
        </view>
        <view class="welfare-desc">{{ shopData.pointToMoneyInfo }}</view>
        <button @click="toSindex">去看看</button>
      </view>
      <view class="welfare-item" v-if="shopData.groupDiscountFlag===1">
        <view class="welfare-title">
          {{ welfareList[2] }}
          <text>优惠团购</text>
        </view>
        <view class="welfare-desc">{{ shopData.groupDiscountInfo }}</view>
      </view>
      <view class="welfare-item" v-if="shopData.referralRewardFlag===1">
        <view class="welfare-title">
          {{ welfareList[3] }}
          <text>转介绍得奖励</text>
        </view>
        <view class="welfare-desc">{{ shopData.referralRewardInfo }}</view>
      </view>
    </view>
    <view class="item video-box" v-if="shopData.storeFeatureUrlList.length>0">
      <view class="top-title">
        <image :src="image_host+'image-icon.png'"></image>
        <text>门店风采</text>
      </view>
      <view class="video-list">
        <view class="file-item" v-for="(item, index) in shopData.storeFeatureUrlList"
              @click="showVideoImage(item,index)">
          <view class="play" v-if="item.type==='video'"></view>
          <image v-if="item.type==='image'" :src="item.img" mode="aspectFill"></image>
          <video v-if="item.type==='video'"
                 :id="'video_play'+index" :src="item.url"
                 :show-fullscreen-btn="false"
                 :show-center-play-btn="false"
                 :show-play-btn="false"
                 @fullscreenchange="fullscreenchange" :poster="item.img"></video>
        </view>
      </view>
    </view>
    <view class="button-box" v-if="userInfo.isNew===1">
      <view class="button" @click="toRegister"></view>
    </view>
    <button open-type="share" class="share" v-if="isShare"></button>
    <view style="width: 100%;height: 250rpx"></view>
    <shop-qrcode ref="shopQrcode"></shop-qrcode>
  </view>
</template>

<script>
import shopQrcode from "@/pagesA/shopWelfareView/components/shopQrcode.vue";

export default {
  components: {
    shopQrcode
  },
  data() {
    return {
      image_host: this.image_host + 'shopWelfareView/',
      menuInfo: uni.getStorageSync('menuInfo'),
      topHiderStyle: '',
      topHiderIconStyle: '',
      messageBoxStyle: '',
      messageTextStyle: '',
      code: '',
      shopData: {
        storeFeatureUrlList: [],
        shopImageUrlList: []
      },
      videoContext: {},
      indexVideo: '',
      invitorCode: '',// 门店邀请码
      userInfo: {},
      invitorCustomer: '',// 邀请人id
      isShare: false,
      isShopWelfare: false,// 是否是门店福利页面
      isLogin: false,
      welfareList: [],
      isShow: false,
    };
  },
  async onLoad({taskCode, invitorCode, invitorCustomer}) {
    this.topHiderStyle = `height:${this.menuInfo.contentTop};padding-top:${this.menuInfo.menuTop};line-height:${this.menuInfo.menuHeight};`
    this.topHiderIconStyle = `top:${this.menuInfo.menuTop};left:${this.menuInfo.menuRight};width:${this.menuInfo.menuHeight};height:${this.menuInfo.menuHeight};`
    this.messageBoxStyle = `top:${this.menuInfo.contentTop};`
    this.code = taskCode
    this.invitorCode = invitorCode
    this.invitorCustomer = invitorCustomer || ''
    await this.login()
    this.getInfo()
  },
  onShow() {
    if (this.isLogin) this.getInfo()
  },
  // 自定义分享
  onShareAppMessage() {
    let title = `人康优选-${this.shopData.shopName} 给您发福利啦！`;
    let image = 'https://wechat-pictures-1301970825.file.myqcloud.com/shop/regist/share.png';
    let path = '/pagesA/shopWelfareView/shopWelfareView?taskCode=' + this.code + '&invitorCode' + this.invitorCode
    // 用户已注册并且在福利页面进入正确
    if (this.userInfo.isNew === 1 && this.shopData.isInviter === 1) path = path + '&invitorCustomer=' + this.userInfo.unionid
    return {
      title: title,
      imageUrl: image,
      path: path
    }
  },
  methods: {
    // scroll(e) {
    //   let {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} = e.detail
    //   if (scrollTop < 20) {
    //     this.topHiderStyle = `height:${this.menuInfo.contentTop};padding-top:${this.menuInfo.menuTop};line-height:${this.menuInfo.menuHeight};background:rgba(0,0,0,0);`
    //   } else {
    //     this.topHiderStyle = `height:${this.menuInfo.contentTop};padding-top:${this.menuInfo.menuTop};line-height:${this.menuInfo.menuHeight};background:rgba(0,0,0,1);`
    //   }
    // },
    login() {
      return new Promise((resolve, reject) => {
        uni.login({
          success: async ({code}) => {
            let res = await this.$NoteApi.doRequest("get", "login", {code: code}, '', true)
            this.userInfo = res.data.data;
            uni.setStorageSync("token", res.data.data.token)
            uni.setStorageSync("userInfo", res.data.data);
            this.isLogin = true
            resolve(true)
          }
        })
      })
    },
    initMessage(textLength, item) {
      this.messageTextStyle = `transition: all ${item / 1000}s linear;`
      this.$nextTick(() => {
        this.messageTextStyle = `text-indent: -${textLength}em;transition: all ${item / 1000}s linear;`
        setTimeout(() => {
          this.messageTextStyle = `text-indent: 20em;transition: all 0s linear;`
          setTimeout(() => {
            this.initMessage(textLength, item)
          }, 100)
        }, item)
      })
    },
    toSindex() {
      uni.switchTab({url: '/pages/sindex/index'});
    },
    toAddUser() {
      this.$refs.shopQrcode.isShow = true
      this.$refs.shopQrcode.getQcode(this.invitorCode)
      // uni.navigateTo({url: '/shopRegister/shopQrcode/index?inviteCode=' + this.invitorCode + '&form=1'});
    },
    toRegister() {
      let url = '/pages/newAnswer/register?invitorCode=' + this.invitorCode + '&inviterUnionid=' + this.invitorCustomer + '&type=welfare';
      uni.navigateTo({url: url})
    },
    toPhone(phone) {
      wx.makePhoneCall({phoneNumber: phone})
    },
    async getInfo() {
      let data = {code: this.code};
      uni.showLoading()
      let res = await this.$javaCircle.doRequest('get', 'vs/shopBenefits/detail', data, '', false);
      uni.hideLoading()
      if (res.data.code === 0) {
        this.isShow = true
        this.shopData = res.data.data
        if (this.shopData.importantNotice?.length > 19) {
          setTimeout(() => {
            this.initMessage(this.shopData.importantNotice.length, this.shopData.importantNotice.length * 600)
          }, 3 * 1000)
        }
        this.isShare = !(this.userInfo.isNew === 0 && this.shopData.isInviter === 0); // 用户已注册并且与福利页面不匹配
        this.isShopWelfare = (this.shopData.bountyAmountFlag === 1 || this.shopData.pointToMoneyFlag === 1 || this.shopData.groupDiscountFlag === 1 || this.shopData.referralRewardFlag === 1);
        let titleList = ['福利一', '福利二', '福利三', '福利四', '福利五'];
        let index = 0;
        this.welfareList = titleList.map((item, i) => {
          if (this.shopData.bountyAmountFlag === 1 && i === 0) {
            index++;
            return titleList[index - 1]
          }
          if (this.shopData.pointToMoneyFlag === 1 && i === 1) {
            index++;
            return titleList[index - 1]
          }
          if (this.shopData.groupDiscountFlag === 1 && i === 2) {
            index++;
            return titleList[index - 1]
          }
          if (this.shopData.referralRewardFlag === 1 && i === 3) {
            index++;
            return titleList[index - 1]
          }
          return ''
        })
        this.$forceUpdate()
      } else {
        uni.showModal({
          title: '提示',
          content: res.data.message,
          success: function (res) {
            uni.switchTab({url: '/pages/sindex/index'})
          }
        })
      }
    },
    shoImage(index) {
      uni.previewImage({
        current: index,
        urls: this.shopData.shopImageUrlList.map(item => item.url)
      })
    },
    showVideoImage(item, index) {
      if (item.type === 'video') {
        this.indexVideo = index;
        //此处需要注意一下，因为是for循环里边的视频或者图片吗，这里id要保持唯一，不然会出现无论点击哪一个都会播放同一个视频的情况。
        this.videoContext = uni.createVideoContext("video_play" + index, this);
        //进入全屏状态
        this.videoContext.requestFullScreen();
        // 从头开始播放视频
        this.videoContext.seek(0);
        this.videoContext.play();
      } else {
        uni.previewImage({
          current: item.url,
          urls: [item.url]
        })
      }
    },
    fullscreenchange(e) {
      if (!e.detail.fullScreen) {
        uni.createVideoContext('video_play' + this.indexVideo, this).pause();

      }
    }
  }
}
</script>

<style lang="scss">
page {
  width: 100%;
  height: 100%;
}

.content {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;

  .top-box {
    width: 100%;
    //height: 1016upx;
    background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/shopWelfareView/bj.png");
    background-size: 100% 1016upx;
    background-repeat: no-repeat;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #18AA59;
    padding-bottom: 34upx;
    border-radius: 0 0 30upx 30upx;
    margin-top: -68upx;

    .shop-content {
      width: 690upx;
      //height: 590upx;
      border: 2upx solid #fff;
      border-radius: 18upx;
      margin-top: 98upx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24upx 0;

      .box {
        width: 630upx;
        //height: 542upx;
        background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/shopWelfareView/bg_dizhi.png");
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 20upx;

        .shop-title {
          font-size: 38upx;
          color: #016656;
          font-weight: 700;
        }

        .shop-username {
          display: flex;
          align-items: center;
          margin-top: 10upx;

          .image-icon {
            width: 30upx;
            height: 34upx;
            margin-right: 18upx;
          }

          text {
            font-size: 38upx;
            color: #000000;
            font-weight: 700;
          }
        }

        .shop-address {
          display: flex;
          margin-top: 12upx;

          .image-icon {
            width: 28upx;
            height: 34upx;
            margin-right: 18upx;
          }

          .address {
            font-size: 36upx;
            color: #000000;
            flex: 1;
          }

          .toAddress {
            width: 96upx;
            height: 52upx;
            background-color: #18AA59;
            text-align: center;
            line-height: 52upx;
            font-size: 32upx;
            color: #FFFFFF;
            border-radius: 10upx;
          }
        }

        .shop-desc {
          width: 100%;
          background-color: #E8F2EC;
          color: #18AA59;
          font-size: 36upx;
          box-sizing: border-box;
          padding: 6upx 14upx;
          margin-top: 30upx;
        }

        .shop-images {
          width: 100%;
          display: flex;
          margin-top: 24upx;
          overflow-x: scroll;
          white-space: nowrap;

          image {
            display: inline-block;
            width: 200upx;
            height: 200upx;
            margin-right: 30upx;
          }
        }

      }
    }
  }

  .buttons {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    margin-top: 40upx;

    button {
      width: 330upx;
      height: 78upx;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      font-size: 38upx;
      font-weight: 700;

      image {
        width: 44upx;
        height: 44upx;
        margin-right: 10upx;
      }
    }

    .phone {
      border: 2upx solid #fff;
      color: #fff;
      background-color: #18AA59;
    }

    .addShop {
      background-color: #fff;
      color: #18AA59;
    }
  }
}

.message-box {
  width: 100%;
  height: 68upx;
  line-height: 68upx;
  background-color: #256B40;
  color: #60FFA6;
  font-size: 40upx;
  position: sticky;
  z-index: 10;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 30upx;

  image {
    width: 42upx;
    height: 34upx;
    margin-right: 10upx;
    position: relative;
    z-index: 1;
  }

  .text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    // text-indent: 20em;
  }
}

.top-hider {
  width: 100%;
  text-align: center;
  position: fixed;
  box-sizing: border-box;
  font-size: 38upx;
  background-color: #56CA8A;
  color: #FFFFFF;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: center;

  .icon {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 90%;
      height: 90%;
    }
  }
}

.item {
  width: 702upx;
  box-sizing: border-box;
  border-radius: 28upx;
  border: 12upx solid #18AA59;
  margin-top: 102upx;
  position: relative;
  padding: 40upx 26upx;

  .top-title {
    position: absolute;
    width: 330upx;
    height: 78upx;
    top: -78upx;
    left: 36upx;
    background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/shopWelfareView/title-bj.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44upx;
    color: #FFFFFF;

    image {
      width: 42upx;
      height: 42upx;
      margin-right: 12upx;
    }
  }

  .welfare-item {
    width: 100%;
    background-color: #F3FFF9;
    border: 2upx solid #18AA59;
    border-radius: 12upx;
    box-sizing: border-box;
    padding: 18upx;
    margin-bottom: 30upx;

    .welfare-title {
      font-size: 40upx;
      color: #18AA59;
      font-weight: 700;
    }

    .welfare-title text {
      margin-left: 15upx;
    }

    .welfare-title::before {
      content: "";
      display: inline-block;
      width: 18upx;
      height: 18upx;
      border-radius: 50%;
      margin-right: 10upx;
      margin-bottom: 6upx;
      background: radial-gradient(0% 74% at 50% 0%, #9BFFD7 0%, #18AA59 100%);
      line-height: 20upx;
    }


    .welfare-desc {
      font-size: 40upx;
      color: #333333;
      margin-top: 10upx;
      word-wrap: break-word;
      line-height: 60upx;
    }

    button {
      width: 100%;
      height: 78upx;
      border-radius: 18upx;
      background: linear-gradient(180deg, #21DB74 0%, #18AA59 100%);
      font-size: 38upx;
      color: #fff;
      font-weight: 500;
      line-height: 78upx;
      margin-top: 20upx;
    }
  }

  .welfare-item:last-child {
    margin-bottom: 0;
  }

  .video-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-count: 2;
    gap: 4%;

    .file-item {
      width: 48%;
      height: 418upx;
      background-color: #ccc;
      margin-bottom: 4%;
      position: relative;

      .play {
        width: 122upx;
        height: 122upx;
        background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/shopWelfareView/icon_play.png");
        background-size: 100% 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
      }

      image {
        width: 100%;
        height: 100%;
      }

      video {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.video-box {
  padding-bottom: 0 !important;
}

.button-box {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
  box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.button {
  width: 100%;
  height: 134upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/shopWelfareView/tozhuce.png");
  background-size: 100% 100%;
  margin-top: 5upx;
}

.share {
  width: 118upx;
  height: 118upx;
  position: fixed;
  bottom: 260upx;
  right: 30upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/shopWelfareView/fenxiang.png");
  background-size: 100% 100%;
  border: none !important;
}

button::after {
  border: none;
}

.text-break-word {
  word-wrap: break-word;
}

.top-hider-title {
  width: 500upx;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

//.welfare-title:nth-child(1) {
//  background-color: red;
//}
//
//.welfare-title:nth-child(2) {
//  background-color: cadetblue;
//}

//.welfare-title:nth-child(2) text::before {
//  content: "福利二";
//  display: inline-block;
//  margin-right: 10upx;
//}
//
//.welfare-title text:nth-child(3)::before {
//  content: "福利三";
//  display: inline-block;
//  margin-right: 10upx;
//}
//
//.welfare-title text:nth-child(4)::before {
//  content: "福利四";
//  display: inline-block;
//  margin-right: 10upx;
//}
</style>
